<template>
  <div class="container">
    <div class="row">
      <!-- 侧边栏 -->
      <div class="col-lg-3 col-md-4 hidden-xs">
        <div id="container-left">
          <carleft></carleft>
        </div>
      </div>
      <div class="col-lg-9 col-md-8 col-sm-12">
        <div id="container-right">
          <!-- 搜索位置 -->
          <CarlistSearch></CarlistSearch>
          <!-- 导航位置 -->
          <CarlistNav></CarlistNav>
          <!-- 汽车列表位置 -->
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>


<script>

import CarlistCtt from "./CarlistCtt.vue";
import CarlistNav from "./CarlistNav.vue";
import carleft from "./carleft.vue";
import CarlistSearch from "./CarlistSearch";

export default {
  data() {
    return {};
  },
  components: {
    CarlistNav,
    CarlistCtt,
    carleft,
    CarlistSearch
  },

  methods: {}
};
</script>
<style scoped>
body {
  background-color: #f9f9f9;
}
.container {
  margin: 0 auto;
  width: 90%;
  /* border:1px solid #00f; */
}
/* 内容左边 */
#container-left {
  position: sticky;
  top: 100px;
  margin-top: 30px;
  border-radius: 10px;
  /* background-color: #f9f9f9; */
  margin-right: 30px;
}
/* 左边的价格、排量、品牌、地图 */
/* 价格 */

/* 地图 */
/* 内容右边 */
#container-right {
  margin-top: 30px;
  /* background-color: #f9f9f9; */
  margin-left: 10px;
}
</style>
